<!DOCTYPE html>
<!-- saved from url=(0039)http://192.168.1.245:52295/vizo/t3.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  
  <title>title</title>
  <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
  <style>
    body,p,ol,ul,li,dl,dd,h1,h2,h3,h4,h5,h6,input,iframe,nav,header,footer {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    body {
      font-size: 14px;
      font-family: -apple-system, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Arial, sans-serif;
      color: #27282b;
      background: #fff;
    }
    a {
      text-decoration: none;
      color: #27282b;
    }
    *,
    *::before,
    *::after {
      outline: none;
      box-sizing: border-box;
    }
    html, body {
      height: 100%;
    }
    .d1 {
      width: 50%;
      height: 100px;
      background: #fff;
      border: 1px solid #ddd;
      margin: 50px auto;
      padding: 30px;
    }
    .pwd-wp {
      position: relative;
    }
    .pwd-ul {
      display: inline-flex;
      border: 1px solid #f0f2fa;
      border-radius: 2px;
    }
    .pwd-ul .li {
      width: 38px;
      height: 38px;
      border-right: 1px solid #f0f2fa;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .pwd-ul .li:last-child {
      border-right: 0;
    }
    .pwd-ul .li::after {
      content: '';
      width: 4px;
      height: 4px;
      background: #333;
      border-radius: 55%;
    }
    .pwd-ul .li.on::after {
      display: none;
    }
    .pwd-wp .inp-sim {
      width: 250px;
      height: 100%;
      border: 0;
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 3;
    }
  </style>
</head>

<body>
  <div id="app" class="wrapper"><div class="d1"><div class="pwd-wp"><ul class="pwd-ul"><li class="li on"></li><li class="li on"></li><li class="li on"></li><li class="li on"></li><li class="li on"></li><li class="li on"></li></ul> <input oninput="value=value.replace(/\D+/, &#39;&#39;)" onselectstart="return false;" ondragstart="return false;" maxlength="6" type="password" class="inp-sim"></div></div></div>

  <script src="./psd_files/vue.min.js"></script>
  <script>
    'use strict'
    var vm = new Vue({
      el: '#app',
      data() {
        return {
          inputPwdValue: '',
        }
      },
      methods: {
        func1(e) {
          
        }
      },
      computed: {
        inputPwdLength() {
          return this.inputPwdValue.length || 0
        },
      },
      mounted() {
        
      },
    })
  </script>
<!-- Code injected by live-server -->
<script type="text/javascript">
	// <![CDATA[  <-- For SVG support
	if ('WebSocket' in window) {
		(function () {
			function refreshCSS() {
				var sheets = [].slice.call(document.getElementsByTagName("link"));
				var head = document.getElementsByTagName("head")[0];
				for (var i = 0; i < sheets.length; ++i) {
					var elem = sheets[i];
					head.removeChild(elem);
					var rel = elem.rel;
					if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
						var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
						elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
					}
					head.appendChild(elem);
				}
			}
			var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
			var address = protocol + window.location.host + window.location.pathname + '/ws';
			var socket = new WebSocket(address);
			socket.onmessage = function (msg) {
				if (msg.data == 'reload') window.location.reload();
				else if (msg.data == 'refreshcss') refreshCSS();
			};
			if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
				console.log('Live reload enabled.');
				sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
			}
		})();
	}
	else {
		console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
	}
	// ]]>
</script>
</body></html>